<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="include/admin/adminHeader::html('子分类管理')">
</head>
<!--<script src="webjars/jquery/2.0.0/jquery.min.js"></script>-->
<!--<link rel="stylesheet" href="webjars/bootstrap/3.0.1/css/bootstrap.min.css">-->
<!--<script src="webjars/bootstrap/3.0.1/js/bootstrap.min.js"></script>-->

<body>
<div id="workingArea" class="container-fluid">
    <!--导航栏-->
    <div th:replace="include/admin/adminNavigator::html"></div>

    <!--左侧折叠菜单-->
    <div th:include="include/admin/adminLeftMenu::html"></div>

    <div class="col-md-10">
        <ol class="breadcrumb">
            <li><a href="categoryList">教学分类</a></li>
            <li class="active">{{category.name}}</li>
        </ol>

        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal1">
            新增子分类
        </button>

        <table class="table table-bordered table-responsive ">
            <thead>
            <tr>
                <th>ID</th>
                <th>子分类名称</th>
                <th>子分类描述</th>
                <th>报名费用</th>
                <th>宣传图片</th>

                <th>删除</th>
                <th>编辑</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="bean in beans">
                <td>{{bean.id}}</td>
                <td>{{bean.name}}</td>
                <td>
                    <p style="width: 200px;white-space: nowrap;text-overflow: ellipsis; overflow: hidden;"
                       :title="bean.description">{{bean.description}}</p>
                </td>
                <td>{{bean.price}}</td>
                <td>
                    <div v-if="bean.img!=null">
                        <img height="20px" width="20px" :src="bean.img">
                    </div>
                    <div v-else> null</div>
                </td>
                <td><a href="#" @click="deleteBean(bean.id)"><span class="glyphicon glyphicon-trash"></span></a></td>
                <td><a href="#" @click="getBean(bean.id)" data-toggle="modal" data-target="#myModal"><span
                        class="glyphicon glyphicon-edit"></span></a></td>
            </tr>
            </tbody>
        </table>
        <div th:replace="include/admin/adminPage::html"></div>
    </div>

    <div th:replace="include/admin/adminFoot::html"></div>

    <!-- 增加Modal -->
    <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel1">增加一个子分类</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label class="col-md-4 control-label">子分类名称：</label>
                            <div class="col-md-6">
                                <input name="name" class="form-control" v-model="bean.name"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-4 control-label">子分类描述：</label>
                            <div class="col-md-6">
                                        <textarea name="description" class="form-control" v-model="bean.description">
                                        </textarea>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-4 control-label">子分类报名费：</label>
                            <div class="col-md-6">
                                <input name="price" class="form-control" v-model="bean.price"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-4 control-label">宣传图片：</label>
                            <div class="col-md-6">
                                <input type="file" @change="getFile($event)">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button id="add" type="button" class="btn btn-primary" @click="add">Post</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 修改Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">修改子分类信息</h4>
                </div>
                <div class="modal-body">
                    <form id="formUpload" class="form-horizontal">
                        <div class="form-group">
                            <label class="col-md-4 control-label">子分类名称：</label>
                            <div class="col-md-6">
                                <input name="name" class="form-control" v-model="bean_get.name"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-4 control-label">子分类描述：</label>
                            <div class="col-md-6">
                                        <textarea name="description" class="form-control"
                                                  v-model="bean_get.description">
                                        </textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-4 control-label">子分类报名费：</label>
                            <div class="col-md-6">
                                <input name="price" class="form-control" v-model="bean_get.price"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-4 control-label">宣传图片：</label>
                            <div class="col-md-6">
                                <input type="file" @change="getFile($event)">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button id="upload" type="button" class="btn btn-primary" @click="update">Modify</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<script>
    $(function () {
        var cid = getUrlParms("cid");

        var data4Vue = {
            uri: "subclass",
            pagination: {},
            beans: [],
            bean: {id: 0, name: "", description: "", img: "", price: "", category: {id: 0}},
            bean_get: {id: 0, name: "", description: "", img: "", price: "", category: {id: 0}},
            category: {id: 0},
            file: ""
        };

        var vue = new Vue({
            el: "#workingArea",
            data: data4Vue,
            mounted: function () {
                this.list(0);
                this.getCategory();
            },
            methods: {
                getCategory: function () {
                    var url = "category/" + cid;
                    axios.get(url).then(function (response) {
                        vue.bean.category = response.data.data;
                        vue.category = response.data.data;
                    })
                },
                list: function (start) {
                    var url = "category/" + cid + "/" + this.uri;
                    axios.get(url).then(function (response) {
                        console.log(response.data.data.content);
                        vue.beans = response.data.data.content;
                        vue.pagination = response.data.data;
                    })
                },
                add: function () {
                    /*bootstrap提交验证*/
                    var validator = $('form').data('bootstrapValidator').validate();
                    if (!validator.isValid()) {
                        //没有通过校验
                        return;
                    } else {
                        //通过校验，可进行提交等操作
                        $('#myModal1').modal('hide');
                    }
                    var formData = new FormData();
                    formData.append("name", this.bean.name);
                    formData.append("price", this.bean.price);
                    formData.append("description", this.bean.description);
                    formData.append("category", this.bean.category.id);
                    formData.append("file", this.file);
                    axios.post(this.uri, formData).then(function (response) {
                        if (response.data.code == 0) {
//                            alert("增加成功");
                            vue.bean = {id: 0, name: "", description: "", category: {id: 0}};
                            vue.list(0);
                        }
                    })
                },
                getBean: function (id) {
                    var url = this.uri + "/" + id;
                    axios.get(url).then(function (response) {
                        vue.bean_get = response.data.data;
                    })

                },
                deleteBean: function (id) {
                    if (!checkDeleteLink())
                        return;
                    var url = this.uri + "/" + id;
                    axios.delete(url).then(function (response) {
                        if (response.data.code == 0) {
                            vue.list(0);
                        }
                    })
                },
                update: function () {
                    /*bootstrap提交验证*/
                    var validator = $('#formUpload').data('bootstrapValidator').validate();
                    if (!validator.isValid()) {
                        //没有通过校验
                        return;
                    } else {
                        //通过校验，可进行提交等操作
                        /*js实现关闭模态框*/
                        $('#myModal').modal('hide');
                    }
                    var formData = new FormData();
                    formData.append("id", this.bean_get.id);
                    formData.append("name", this.bean_get.name);
                    formData.append("price", this.bean_get.price);
                    formData.append("description", this.bean_get.description);
                    formData.append("category", this.bean_get.category.id);
                    formData.append("file", this.file);
                    axios.put(this.uri, formData).then(function (response) {
                        if (response.data.code == 0) {
                            vue.list(0);
                        } else
                            alert("修改失败");
                    })
                },
                getFile: function (event) {
                    this.file = event.target.files[0];
                    console.log(this.file);
                }
                ,
                jump: function (page) {
                    jump(page, vue); //定义在adminHeader.html 中
                }
                ,
                jumpByNumber: function (start) {
                    jumpByNumber(start, vue);
                }
                ,
            }
        })
    })
</script>

<!--表单校验-->
<script>
    $(function () {
        $('form').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
//                valid: 'glyphicon glyphicon-ok',
//                invalid: 'glyphicon glyphicon-remove',
//                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                /*教学分类*/
                name: {
                    validators: {
                        notEmpty: {
                            message: '班级类型不能为空'
                        }
                    }
                },
                price:{
                    validators: {
                        notEmpty: {
                            message: '报名费用不能为空'
                        },

                    regexp: {
                        /*数字约束*/
                        regexp: /^[0-9]*$/,
                        message: '请输入数字'
                    }
                }
                }


            }
        });
    });
</script>
</html>